<script setup lang="ts">
import { ref } from 'vue'
import BubbleBarCommon from './BubbleBarCommon.vue'

// 气泡栏组件引用
const bubbleBarRef = ref<InstanceType<typeof BubbleBarCommon>>()

// 暴露方法给父组件
defineExpose({
  addBubble: (name: string, path: string) => {
    bubbleBarRef.value?.addOrActivateBubble(name, path)
  }
})
</script>

<template>
  <div class="tap-container">
    <BubbleBarCommon ref="bubbleBarRef" />
    <div class="content-container">
      <router-view />
    </div>
  </div>
</template>

<style scoped>
.tap-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-container {
  flex: 1;
  overflow: hidden;
  height: 100%;
}
</style>
